<html>
<head>
    <meta charset="UTF-8" />
    <title>店铺出售商品的种类数量</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-3d.js"></script>
    <script src="../js/vue.js"></script>
    <style>
        #container{
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }

    </style>

</head>
<body>
<div id="container">

</div>
<script type="text/javascript">
   var add = new Vue({
       el:"#container",
       data:{
           productsStoreId:null

       },
       created:function(){
           this.dataProductStoreId();

       },
       methods:{
           dataProductStoreId:function () {
               var  _this = this;
               $.ajax({
                   url:"/selectProductStoreId",
                   async:false,
                   success:function (data) {
                       _this.productsStoreId =data.list;
                   },
                   error:function (error) {
                       alert(data.responseJSON.message);
                   },

                });
           }

       }
   });
    var store_id1 = add.productsStoreId[0].storeId;
    var store_name1 = add.productsStoreId[0].storeName;
   var store_id2 = add.productsStoreId[1].storeId;
   var store_name2 = add.productsStoreId[1].storeName;
   var store_id3 = add.productsStoreId[2].storeId;
   var store_name3 = add.productsStoreId[2].storeName;
   var store_id4 = add.productsStoreId[3].storeId;
   var store_name4 = add.productsStoreId[3].storeName;
   var store_id5 = add.productsStoreId[4].storeId;
   var store_name5 = add.productsStoreId[4].storeName;
   var store_id6 = add.productsStoreId[5].storeId;
   var store_name6 = add.productsStoreId[5].storeName;
   var store_id7 = add.productsStoreId[6].storeId;
   var store_name7 = add.productsStoreId[6].storeName;
    $(document).ready(function() {
        var chart = {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        };
        var title = {
            text: '店铺出售商品的种类数量占用率'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };

        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        };
        var series= [{
            type: 'pie',
            name: 'Browser share',
            data: [
                [store_name1,store_id1],
                [store_name2,store_id2],
                [store_name3,store_id3],
                [store_name4,store_id4],
                [store_name5,store_id5],
                [store_name6,store_id6],
                [store_name7,store_id7],

            ]
        }];
        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.plotOptions = plotOptions;
        json.series = series;
        $('#container').highcharts(json);
    });



</script>
</body>
</html>